<template>
  <div class="outdoor-planning">
    <!-- 标题区域 -->
    <div class="title-container">
      <div class="title">
        <h1>户外策划</h1>
        <p class="subtitle">探索自然，创造难忘体验</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div
          class="section"
          v-for="(plan, index) in plans"
          :key="index"
          :style="{ '--delay': index * 0.1 + 's' }"
      >
        <div class="section-content">
          <div class="image-container">
            <img :src="plan.image" :alt="plan.title" class="plan-image">
            <div class="image-overlay"></div>
          </div>
          <div class="text">
            <h2>{{ plan.title }}</h2>
            <div class="divider"></div>
            <div class="info-item">
              <span class="info-icon">🌿</span>
              <p>{{ plan.features }}</p>
            </div>
            <div class="info-item">
              <span class="info-icon">🏆</span>
              <p>{{ plan.case }}</p>
            </div>
            <div class="info-item">
              <span class="info-icon">👥</span>
              <p>{{ plan.suitable }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import image20 from '../../../assets/20.jpg'
import image21 from '../../../assets/21.jpg'
import image22 from '../../../assets/22.jpg'
import image23 from '../../../assets/23.jpg'

const plans = [
  {
    title: '徒步探险',
    image: image20,
    features: '探索自然，挑战自我，享受徒步旅行的乐趣。',
    case: '去年组织了一次穿越国家公园的徒步活动，参与者反响热烈，许多人表示这是一次难忘的经历。',
    suitable: '喜欢户外运动和探险的个人或团队。'
  },
  {
    title: '露营体验',
    image: image21,
    features: '体验野外生活，学习生存技能，享受星空下的夜晚。',
    case: '在夏季组织了一次为期三天的露营活动，参与者在专业指导下学习了搭建帐篷、野外烹饪等技能。',
    suitable: '家庭、朋友团体以及对野外生存感兴趣的个人。'
  },
  {
    title: '团队拓展',
    image: image22,
    features: '增强团队协作，提升团队凝聚力，通过游戏和挑战增进了解。',
    case: '为某科技公司策划了一次团队拓展活动，通过一系列团队游戏和挑战，员工之间的合作更加默契。',
    suitable: '企业团队、学校班级以及需要团队建设的组织。'
  },
  {
    title: '亲子活动',
    image: image23,
    features: '增进亲子关系，通过共同参与活动，享受家庭乐趣。',
    case: '组织了一次亲子农场体验活动，家长和孩子一起参与农耕、喂养动物等，增进了亲子间的互动。',
    suitable: '有孩子的家庭，特别是希望增进亲子关系的家长。'
  }
]
</script>

<style scoped>
.outdoor-planning {
  padding: 40px 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8fafc;
}

/* 标题区域样式 */
.title-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.title {
  background-color: #FFFFFF;
  padding: 25px 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: fit-content;
  max-width: 80%;
  transform: translateY(-20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin: 0;
  font-weight: 300;
}

/* 内容区域样式 */
.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  width: 100%;
}

.section {
  background-color: #FFFFFF;
  padding: 0;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out var(--delay) forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.section-content {
  display: flex;
  height: 100%;
}

.image-container {
  position: relative;
  width: 40%;
  min-height: 250px;
  overflow: hidden;
}

.plan-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

.section:hover .plan-image {
  transform: scale(1.05);
}

.text {
  padding: 25px;
  width: 60%;
}

.text h2 {
  font-size: 1.6rem;
  color: #3498db;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.divider {
  height: 3px;
  width: 60px;
  background: linear-gradient(to right, #3498db, #9b59b6);
  margin: 0 0 20px 0;
  border-radius: 3px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.info-icon {
  font-size: 1.2rem;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.text p {
  line-height: 1.7;
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .title {
    padding: 20px 30px;
  }

  h1 {
    font-size: 2.2rem;
  }

  .subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr;
  }

  .section-content {
    flex-direction: column;
  }

  .image-container {
    width: 100%;
    height: 250px;
  }

  .text {
    width: 100%;
    padding: 20px;
  }

  .title {
    max-width: 90%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  .text h2 {
    font-size: 1.4rem;
  }

  .info-icon {
    font-size: 1rem;
  }

  .text p {
    font-size: 0.9rem;
  }
}
</style>